<script >
export default {
    name:"BrowseData",

    data(){
        return {
            tableData:[],
            pageSize:11,
            pageNum:1,
            total:0,

            addVisible:false,
            addForm:{
                id:null,
                uid:null,
                gid:null,
                time:null,
            },
            addRules: {
                uid: [{ required: true, message: '请输入uid', trigger: 'blur' }],
                gid: [{ required: true, message: '请输入gid', trigger: 'blur' }],
            },
            isSelectHidden:true,
            selectedIds: [],

            modifyVisible:false,
            modifyForm:{
                id:null,
                uid:null,
                gid:null,
                time:null,
            },
            modifyRules: { // 表单验证规则
                id: [{ required: true, message: '请输入ID', trigger: 'blur' }]
            },
            searchVisible:false,
            isSearch:false,
            searchForm:{
                id:'',
                uid:'',
                gid:'',
                time:'',
            }
        }
    },
    methods:{

        loadPost() {
            if(this.isSearch){
                this.$axios.post(this.$httpUrl + '/browse/querylike', {
                    "pageSize": this.pageSize,
                    "pageNum": this.pageNum,
                    "param": this.searchForm
                }).then(res => res.data).then(res => {
                    console.log(res)
                    this.total = res.total
                    this.tableData = res.data
                })

            }else {
                this.$axios.post(this.$httpUrl + '/browse/querylike', {
                    "pageSize": this.pageSize,
                    "pageNum": this.pageNum,
                    "param": {
                        "id":'',
                        "uid":'',
                        "gid":'',
                        "time":'',
                    }
                }).then(res => res.data).then(res => {
                    console.log(res)
                    this.total = res.total
                    this.tableData = res.data
                })
            }
        },
        addPost(){
            this.$axios.post(this.$httpUrl + '/browse/saveORmodify', {
                "id": this.addForm.id,
                "uid": this.addForm.uid,
                "gid": this.addForm.gid,
                "time": this.addForm.time,
            }).then(res=>res.data).then(res => {
                if (res.code === 200) {
                    this.$notify({
                        title: '成功',
                        message: '添加成功',
                        type: 'success'
                    });
                    this.loadPost();
                }
                else
                    this.$notify.error({
                        title: '错误',
                        message: '添加失败'
                    });
            })
        },
        deletePost(){

            this.$axios.post(this.$httpUrl + '/browse/delete', {
                "ids":this.selectedIds
            }).then(res=>res.data).then(res => {
                console.log(res);
                if (res.code === 200) {
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success'
                    });
                    this.loadPost();
                }
                else
                    this.$notify.error({
                        title: '错误',
                        message: '删除失败'
                    });
            })
        },
        modifyPost(){
            this.$axios.post(this.$httpUrl + '/browse/saveORmodify', {
                "id": this.modifyForm.id,
                "uid": this.modifyForm.uid,
                "gid": this.modifyForm.gid,
                "time": this.modifyForm.time,
            }).then(res=>res.data).then(res => {
                if (res.code === 200) {
                    this.$notify({
                        title: '成功',
                        message: '修改成功',
                        type: 'success'
                    });
                    this.loadPost();
                }
                else
                    this.$notify.error({
                        title: '错误',
                        message: '修改失败'
                    });
            })
        },

        handleCurrentChange(pageNum) {
            this.pageNum = pageNum;
            this.loadPost();
        },

        addClear(){
            this.addForm.id=null;
            this.addForm.uid=null;
            this.addForm.gid=null;
            this.addForm.time=null;
        },
        selectChange(selectedRows){
            this.selectedIds = selectedRows.map(row => row.id);
            console.log(this.selectedIds);
        },
        modifyClear(){
            this.addForm.id=null;
            this.addForm.uid=null;
            this.addForm.gid=null;
            this.addForm.time=null;
        },
    },

    beforeMount() {
        this.loadPost();
    }
}
</script>

<template>
    <div>
        <el-row type="flex" class="row-bg" justify="left" style="height: 5vh;padding: 0;margin: 0">
            <el-col :span="1.5"><el-button size="medium" icon="el-icon-plus"
                                           @click="addVisible=true" :disabled="!isSelectHidden"></el-button></el-col>
            <el-col :span="1.5"><el-button size="medium" icon="el-icon-minus"
                                           @click="isSelectHidden=false" :disabled="!isSelectHidden"></el-button></el-col>
            <el-col :span="1.5"><el-button size="medium" icon="el-icon-edit"
                                           @click="modifyVisible=true" :disabled="!isSelectHidden"></el-button></el-col>
            <el-col :span="2"><el-button size="medium" icon="el-icon-search"
                                         @click="searchVisible=true" :disabled="!isSelectHidden"></el-button></el-col>
            <el-col :span="1.5"><el-button size="medium" icon="el-icon-check"
                                           @click="()=>{
                                               isSelectHidden=true;
                                               deletePost();
                                               $refs.table.clearSelection();
                                           }" v-show="!isSelectHidden"></el-button></el-col>
            <el-col :span="1.5"><el-button size="medium" icon="el-icon-close"
                                           @click="()=>{
                                               isSelectHidden=true;
                                               $refs.table.clearSelection();
                                           }" v-show="!isSelectHidden"></el-button></el-col>
        </el-row>
        <el-table   ref="table"
                    :data="tableData"
                    :header-cell-style="{background:'#f2f5fc',color:'#555555'}"
                    @selection-change="selectChange"
                    style="min-height:78vh;"
                    :row-style="{height: '45px'}"
                    stripe>
            <el-table-column v-if="!isSelectHidden" type="selection" width="55">
            </el-table-column>
            <el-table-column  prop="id" label="bid" width="140">
            </el-table-column>
            <el-table-column prop="uid" label="uid" >
            </el-table-column>
            <el-table-column prop="gid" label="gid" >
            </el-table-column>
            <el-table-column prop="time" label="时间" >
            </el-table-column>
        </el-table>

        <el-pagination
            background
            layout="total,prev, pager, next,jumper"
            style="text-align: center"
            :total=this.total
            @current-change="handleCurrentChange">
        </el-pagination>

        <el-dialog
            title="添加项"
            :visible.sync="addVisible"
            width="30%"
            :before-close="(done)=>{
                done();
                addClear();
            }">
            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="80px">

                <!-- uid -->
                <el-form-item label="uid" prop="uid">
                    <el-input v-model="addForm.uid" placeholder="请输入uid"></el-input>
                </el-form-item>

                <!-- gid -->
                <el-form-item label="gid" prop="gid">
                    <el-input v-model="addForm.gid"  placeholder="请输入gid"></el-input>
                </el-form-item>

                <!-- 时间 -->
                <el-form-item label="时间" prop="time">
                    <el-input v-model="addForm.time" placeholder="请输入时间"></el-input>
                </el-form-item>


            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="() => {
                    addVisible = false;
                    addClear();
                }">取 消</el-button>
                <el-button @click="() => {
                    this.$refs.addForm.validate((valid) => {
                        if (valid) {
                            addVisible = false;
                            addPost();
                            addClear();
                        }
                    })
                }">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="修改项"
            :visible.sync="modifyVisible"
            width="30%"
            height="20%"
            :before-close="(done)=>{
                done();
                modifyClear();
            }">
            <el-form :model="modifyForm" :rules="modifyRules" ref="modifyform" label-width="80px">
                <!-- ID -->
                <el-form-item label="ID" prop="id">
                    <el-input v-model="modifyForm.id"  placeholder="请输入ID"></el-input>
                </el-form-item>

                <!-- uid -->
                <el-form-item label="uid" prop="uid">
                    <el-input v-model="modifyForm.uid" placeholder="请输入uid"></el-input>
                </el-form-item>

                <!-- gid -->
                <el-form-item label="gid" prop="gid">
                    <el-input v-model="modifyForm.gid"  placeholder="请输入gid"></el-input>
                </el-form-item>

                <!-- 时间 -->
                <el-form-item label="时间" prop="time">
                    <el-input v-model="modifyForm.time" placeholder="请输入时间"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="() => {
                    modifyVisible = false;
                    modifyClear();
                }">取 消</el-button>
                <el-button @click="() => {
                    this.$refs.modifyform.validate((valid) => {
                        if (valid) {
                         modifyVisible = false;
                        modifyPost();
                        modifyClear();
                        }
                    })
                }">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="筛选条件"
            :visible.sync="searchVisible"
            width="30%"
            :before-close="(done)=>{loadPost();done()}">

            <el-form :model="searchForm" label-width="80px">
                <el-form-item label="ID">
                    <el-input v-model="searchForm.id"></el-input>
                </el-form-item>
                <el-form-item label="uid">
                    <el-input v-model="searchForm.uid"></el-input>
                </el-form-item>
                <el-form-item label="gid">
                    <el-input v-model="searchForm.gid"></el-input>
                </el-form-item>
                <el-form-item label=" 时间">
                    <el-input v-model="searchForm.time"></el-input>
                </el-form-item>
                <el-form-item label="启用筛选条件">
                    <el-switch v-model="isSearch"></el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="() => { searchVisible = false;loadPost() }">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<style scoped>
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>